<template>
  <div class="box">
    <button v-on:click="handleClick">当前点击次数：{{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
// let count = 20   //普通变量，只能被绑定到模板中，后续的改变不会重新渲染模板
let count = ref(20) //状态变量，绑定到模板中后，接下来的改变会重新渲染模板 —— 具备响应式特性


function handleClick(){
  //count++
  count.value++
  console.log('按钮被单击了', count.value)
}
</script>

<style scoped>
.box{
  border: 1px solid #aaa;
  padding: 10px;
  margin: 10px;
}
</style>